<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="850px">
    <div class="form-box">
      <el-descriptions title="账号信息" :column="2" border :labelStyle="{width:'100px'}" :contentStyle="{minWidth:'200px'}">
        <el-descriptions-item label="回收状态">
          <el-tag :type="commonMaps.backStateMap[huishouObj.backState||1].type"  >{{commonMaps.backStateMap[huishouObj.backState||1].label}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="拒收原因" v-if="huishouObj.backState==5">{{huishouObj.jushouRemark?huishouObj.jushouRemark:'暂无'}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{huishouObj.contactPhone}}</el-descriptions-item>
        <el-descriptions-item label="游戏">{{huishouObj.gameName}}</el-descriptions-item>
        <el-descriptions-item label="游戏账号">{{huishouObj.accountNumber}}</el-descriptions-item>
        <el-descriptions-item label="区服">{{huishouObj.region}}</el-descriptions-item>
        <el-descriptions-item label="实名" v-if="huishouObj.relname">{{huishouObj.relname}}</el-descriptions-item>
        
        <el-descriptions-item label="简介" :span="2">
          <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{huishouObj.des}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="图片" :span="2">
          <div class="img-box flex">
            <div v-for="(item, ind) in list" :key="item" >
              <img :src="item" @click="review(ind)"/>
            </div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="卖家定位" :span="2" v-if="huishouObj.gpsAddr">
          {{ huishouObj.gpsAddr }}
        </el-descriptions-item>
        <el-descriptions-item label="期望价" v-if="huishouObj.hopeAmount">
          <span style="color:red;">{{huishouObj.hopeAmount?('¥'+ huishouObj.hopeAmount):'暂无'}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="回收价" v-if="huishouObj.backAmount">
          <span style="color:red;">{{huishouObj.backAmount?('¥'+ huishouObj.backAmount):'暂无'}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="AI估价">
          <span style="color:red;">{{huishouObj.gujiaAmount?('¥'+ huishouObj.gujiaAmount):'暂无AI估价'}}</span>
        </el-descriptions-item>
      </el-descriptions>

    </div>
  </el-dialog>
</template>

<script>
import onSelfApi from "@/api/retrieveManage/onSelf.js";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      title: "回收线索详情",
      list: [],
      total: 0,

      // 表单参数
      form: {},
      rules: {},
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      huishouObj: {},
      backId:''
    };
  },
  created() {},
  methods: {
    // 打开弹窗
    open(data) {
      this.dialogVisible = true;
      this.queryParams = {
        pageNum: 1,
        pageSize: 20
      };
      this.backId = data.id;
      this.getList();
    },
    getList() {
      onSelfApi.getBackClueInfo(this.backId).then((res) => {
        // this.list = res.data.rlist;
        this.huishouObj = res.data;
        const arrtemp = [];
        if (this.huishouObj.img) {
          const arr = JSON.parse(this.huishouObj.img);
          if (arr.length) {
            arr.forEach((r) => {
              arrtemp.push(r.url);
            });
          }
        }
        if (this.huishouObj.relnameImg) {
          arrtemp.push(this.huishouObj.relnameImg);
        }
        this.list = arrtemp;
      });
    },
    review(ind) {
      this.$viewerApi({
        images: this.list,
        options: {
          initialViewIndex: ind,
        },
      });
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="css">
.center {
  text-align: center;
}

.form-box {
  width: 100%;
  /* height: calc(100vh - 20vh - 200px); */
  overflow-y: auto;
  /* padding-top: 20px; */
}

.img-box {
  width: 700px;
  flex-wrap: wrap;
}
img{
  cursor: pointer;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>
